<template>
  <div class="home">
    <el-container style="height: 747px;">
      <el-aside style="width: 200px;">
        <el-dropdown @command="dropDown">
          <el-avatar :size="40" :src="require('./../assets/avatar.jpg')"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="addAdmin">添加管理员</el-dropdown-item>
            <el-dropdown-item command="exitLogin" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-menu default-active="/all" :router="true" class="el-menu-vertical-demo">
          <el-menu-item index="/all">
            全部
          </el-menu-item>
          <el-menu-item index="/single">
            单人
          </el-menu-item>
          <el-menu-item index="/double">
            双人
          </el-menu-item>
          <el-menu-item index="/more">
            三人及以上
          </el-menu-item>
          <el-menu-item index="/stat">
            统计
          </el-menu-item>
          <el-menu-item index="/register">
            注册VIP用户
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view :key="$store.state.viewKey"></router-view>
        </el-main>
      </el-container>
    </el-container>


  </div>
</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "Home",
  methods: {
    dropDown(command) {
      if (command === 'addAdmin'){
        this.$router.push('/add')
      }
      if (command === 'exitLogin'){
        this.$confirm('确定退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.commit('clearLogin')
          Cookies.remove('token')
          Cookies.remove('tokenHead')
          location.reload()
        }).catch(() => {
        });
      }
    }
  }
}
</script>

<style scoped>
</style>
